<template>
	<view class="log_comp">
		<!-- 表单 -->
		<view class="forms">
			<u--form ref="formRef" :model="FromData" :rules="rules">
				<!-- 名字 -->
				<u-form-item  prop="nickname" borderBottom v-if="type=='fillin'">
					<u-input clearable v-model="FromData.nickname" disabledColor="#ffffff" placeholder="请输入您的名字"
						border="none"></u-input>
				</u-form-item>
				<!-- 用户名 -->
				<u-form-item  prop="mobile" borderBottom v-if="type=='login'||type=='reg'">
					<u-input clearable v-model="FromData.mobile" border="none" placeholder="请输入手机号">
						<template #prefix>
							<text class="phone_prefix" @click="FromData.showPicker=true">{{curPick}}
								<text class="line"></text>
							</text>
							<u-picker closeOnClickOverlay @close="FromData.showPicker=false" @cancel="FromData.showPicker=false" @confirm="confPick" :show="FromData.showPicker" :columns="FromData.pickerData"></u-picker>
						</template>
					</u-input>
				</u-form-item>
				<!-- 密码 -->
				<u-form-item  prop="password" borderBottom v-if="type=='login'||type=='forget'||type=='fillin' ">
					<u-input password clearable v-model="FromData.password" :placeholder="type=='forget'?'请输入新密码':'请输入登陆密码'"
						border="none"></u-input>
				</u-form-item>
				<!-- 重输密码 -->
				<u-form-item  prop="pwdTwo" borderBottom v-if="type=='fillin'||type=='forget'">
					<u-input password clearable v-model="FromData.pwdTwo" :placeholder="type=='forget'?'请重新输入新密码':'请重新输入登陆密码'"
						border="none"></u-input>
				</u-form-item>
				<!-- 验证码 -->
				<u-form-item  prop="code" borderBottom v-if="type=='reg'">
					<view class="code">
						<u-input clearable v-model="FromData.code" placeholder="请输入6位验证码"
							border="none"></u-input>
							<u-toast ref="uToast"></u-toast>
							<u-code seconds="10"  ref="uCode" 
							@change="codeChange"></u-code>
							<u-button class="codeb_tn" @tap="getCode">{{tips}}</u-button>
					</view>
				</u-form-item>
				<u-form-item v-if="type=='login'||type=='reg'">
					<view class="gotoCreat">
						<text @click="goReg">手机{{type=='login'?'注册':'登陆'}}</text>
						<text @click="forget">忘记密码</text>
					</view>
				</u-form-item>
				<!-- 目的选择 -->
				<u-form-item v-if="type=='objective'">
					<view class="objective_content">
						<text class="tit_md">请选择登陆目的</text>
						<u-radio-group class="radio_group" activeColor="#2979ff" v-model="FromData.purpose" :value='FromData.purpose' @change="(name)=>FromData.purpose=name" placement="column" iconPlacement="right">
							<u-radio class='radio' name='征婚' :label="`征婚&emsp;寻找知心爱人`"></u-radio>
							<u-radio name='学习' :label="`学习&emsp;成为知心知情知意的人`"></u-radio>
							<u-radio name='谈心' :label="`谈心&emsp;找只因说说心中的话`"></u-radio>
							<u-radio name='解惑' :label="`解惑&emsp;找专家导师解决心中的困扰`"></u-radio>
							<u-input clearable placeholder="以上都不是,我自己输入" border="none"></u-input>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item  >
					<u-button type="primary" :color="props.background" :text="type=='login'?'登陆':'确定'" @click="clickBtn"></u-button>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script setup>
	import {getCurrentInstance, onMounted,reactive,ref, watchEffect} from "vue";
	//参数接收
	const props = defineProps({
		type:{
			type:String,
			default:()=>{}
		},
		code:{
			type:String,
			default:()=>{}
		}
	})
	// type
	const type=ref('')
	// 传回父组件
	const emit=defineEmits(['clickBtn','goReg','forget','clickCode'])
	// 表单数据
	const FromData=ref({
		mobile:'15086962178',//用户
		password:'',//密码
		pwdTwo:'',//二次确认密码
		code:'',//验证码
		nickname:'',//昵称
		purpose:'征婚',//目的
		showPicker:false,//picker显示
		pickerData:[['+86', '+87', '+88']],//picker数组
	})
	// tips
	const tips=ref('')
	// 当前显示的picker
	const curPick=ref(FromData.value.pickerData[0][0])
	//密码一致性验证
	const checkPwd=(rule,value,callback)=>{
		if(value==FromData.value.password)callback()
		else callback(new Error('密码不一致'))
	}
	// 表单验证
	const rules= {
		'nickname': {
			type: 'string',
			required: true,
			message: '请输入昵称',
			trigger: ['blur', 'change']
		},
		'mobile': {
			type: 'string',
			required: true,
			message: '请输入手机号',
			trigger: ['blur', 'change']
		},
		'password': {
			type: 'string',
			max: 18,
			required: true,
			message: '请输入密码',
			trigger: ['blur', 'change']
		},
		'pwdTwo': [{
			type: 'string',
			max: 18,
			required: true,
			message: '请再次输入密码',
			trigger: ['blur', 'change'],
		},
		{
			type: 'string',
			required: true,
			trigger: ['blur', 'change'],
			validator:checkPwd
		}],
		'code': {
			type: 'string',
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change']
		},
	}
	// pick选择后
	const confPick=(data)=>{
		FromData.value.showPicker=false
		curPick.value=data.value[0]
	}
	// 表单节点
	const formRef=ref(null)
	// 验证码
	// const uCode=ref()
	// toast提示
	// const uToast=ref()
	// 验证码改变
	const codeChange=(text)=>{
		tips.value=text
	}
	// 点击获取验证码
	const getCode=()=>{
		formRef.value.validateField('mobile')	
		FromData.value.code=props.code
		emit('clickCode',{mobile:FromData.value.mobile})
		/* if(uCode.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			}) 
			setTimeout(() => {
				uni.hideLoading();
				// 这里此提示会被this.start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCode.value.start();
			}, 2000);
		} */
	}
	// 点击了前往注册
	const goReg=()=>{
		if(type.value=='login'){
			emit('goReg','reg')	
		}else{
			emit('goReg','login')
		}
		formRef.value.resetFields()
	}
	// 点击了忘记密码
	const forget=()=>{
		emit('forget','forget')
		formRef.value.resetFields()
	}
	// 点击了登陆
	const clickBtn=()=>{
		// formRef.value.validate().then(res=>{
			 if(type.value=='login'){
				const {mobile,password}=FromData.value
				emit('clickBtn',{mobile,password})
				formRef.value.resetFields()
			}else if(type.value=='reg'){
				const {mobile,code}=FromData.value
				emit('clickBtn','fillin',{mobile,code})
				formRef.value.resetFields()
			}else if(type.value=='fillin'){
				const {nickname,password}=FromData.value
				emit('clickBtn','objective',{nickname,password})
				formRef.value.resetFields()
			}else if(type.value=='objective'){ 
				const {purpose}=FromData.value
				emit('clickBtn','',{purpose})
				formRef.value.resetFields()
			}
		// }).catch(erro=>{})
	}
	watchEffect(() => {
		type.value=props.type
		FromData.value.code=props.code
		console.log(type.value);
	})
</script>

<style lang="scss">
	.log_comp{
		.phone_prefix{
			width: 150rpx;
			font-size: 18px;
			position: relative;
			.line{
				position: absolute;
				top: 0;
				right: 0;
				display: inline-block;
				width: 1px;
				height: 24px;
				margi: 0 10rpx;
				background: #f1f1f1;
			}
		}
		.code{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.codeb_tn{
				width: 200rpx;
			}
		}
		.form_button{
			width: 100%;
			height: 40rpx;
		}
		.gotoCreat{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0 20rpx;
			text{
				color: #0084ff;
				cursor: pointer;
			}
		}
		.objective_content{
			width: 100%;
			display: flex;
			flex-direction: column;
			.tit_md{
				color: #0084ff;
				padding: 10rpx;
			}
			.radio_group{
				border-top: 1px solid #ececec;
				border-bottom: 1px solid #ececec;
				padding: 0 20rpx 0 50rpx;
				.u-radio{
					border-bottom: 1px solid #ececec;
					padding: 30rpx 0;
				}
			}
		}
		
	}
</style>
